<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>canvas</title>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    #canvas{
        border: 1px solid #000;
        background: #f7f7f7;
        margin: 100px;
    }
</style>
</head>
<body>
    <canvas id='canvas' width="400" height="400"></canvas>
</body>
<script>
    // quadraticCurveTo
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    ctx.strokeStyle = '#f77';
    // ctx.beginPath();
    // ctx.moveTo(0,0);
    // ctx.quadraticCurveTo(30,30,60,0);//前两个是控制点坐标，后两个是终点坐标
    // ctx.stroke();
    
    // // ctx.strokeStyle = '#00f'
    // ctx. beginPath();
    // ctx.moveTo(30,30);
    // ctx.lineTo(0,0);
    // ctx.moveTo(30,30);
    // ctx.lineTo(60,0);
    // ctx.stroke()

    
    
    canvas.addEventListener('mousemove',function(e){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.beginPath();
        ctx.moveTo(200,200);
        ctx.quadraticCurveTo(95,200,100,280);
        ctx.quadraticCurveTo(108,320,160,320);
        ctx.quadraticCurveTo(134,335,100,330);
        ctx.quadraticCurveTo(159,344,180,320);
        ctx.quadraticCurveTo(258,324,260,270);
        ctx.quadraticCurveTo(272,199,200,200);
        // ctx.quadraticCurveTo(e.clientX-100,e.clientY-100,200,200);
        console.log(e.clientX-100,e.clientY-100)
        ctx.stroke()
        ctx.closePath()
    })

</script>
</html>